<template>
  <view class="whole">
    <view class="topShowView">
      <image :src="saomaImage" class="topImage" @click="clickFunction(0)"></image>
      <image :src="shezhiImage" class="topImage" @click="clickFunction(1)"></image>
    </view>

    <view class="avatarShowView">
      <u-avatar :src="avatarSrc" mode="aspectFill" shape="circle" @click="clickFunction(10)" size="150rpx"></u-avatar>
      <text v-if="this.username==''" class="loginText" @click="clickLogin">前往登录/注册</text>
	  <text v-if="this.username!=''" class="usernameText">{{this.username}}</text>
    </view>

    <view class="accountDataList-container">
      <view class="list-item">
        <view class="values-row">
          <view class="value-label" @click="clickFunction(item.id)" 
		  v-for="item in accountDataList" :key="item.id">
            <text class="value">{{ item.value }}</text>
            <text class="label">{{ item.label }}</text>
          </view>
        </view>
      </view>
    </view>

	<view class="functionList-container">
	  <view class="list-item">
	    <view class="values-row">
	      <view class="value-label" @click="clickFunction(item.id)" 
		  v-for="item in functionList" :key="item.id">
	        <image class="valueimg" :src="item.value"></image>
	        <text class="label">{{ item.label }}</text>
	      </view>
	    </view>
	  </view>
	</view>

    <myTabBar class="myTabBar"></myTabBar>
  </view>
</template>

<script>
export default {
  data() {
    return {
		saomaImage: require('@/static/img/saoma.png'),
		shezhiImage: require('@/static/img/shezhi.png'),
		avatarSrc: null,
		username:'',
		uid:'',
		token:'',
		accountDataList: [
			{id: 2, label: '关注', value: '-'},
			{id: 3, label: '粉丝', value: '-'},
			{id: 4, label: '访问', value: '-'},
			{id: 5, label: '排名', value: '-'},
		],
		functionList: [
			{id: 6, label: '浏览历史', value: '/static/img/clock.png'},
			{id: 7, label: '收藏夹', value: '/static/img/star.png'},
			{id: 8, label: '内容管理', value: '/static/img/content.png'},
			{id: 9, label: '内容数据', value: '/static/img/analysis.png'},
		],
    };
  },
  methods: {
	initPage(){
		this.uid=uni.getStorageSync('UID');
		this.token=uni.getStorageSync('token');
		if(this.uid!=''&&this.token!=''){
			this.getUsername();
			this.getOtherUserData();
			this.avatarSrc=uni.getStorageSync('userAvatar'+this.uid);
		}
		
	},
	getUsername(){
		const username=uni.getStorageSync('username');
		this.username=username;
		uni.request({
		 	url:this.baseUrl+'/getUsername',
		 	method:'POST',
		 	data:{
		 		data:{
		 			userId:this.uid
		 		},
		 		msgType:'getUsername'
		 	},
		 	header: {
		 		'Content-Type': 'application/json',// 如果需要以JSON格式发送数据
				'token':this.token,
				'uid':this.uid
		 	},
		 	success: (res) => {
				//console.log(res);
				//console.log(res.data.data.username);
				this.username=res.data.data.username;
				uni.setStorageSync('username',res.data.data.username);
			},
			fail: (err) => {
				console.log(err);
			},
		})
	},
	getUserAvatar(){
		uni.request({
		        url: this.baseUrl+'/getUserAvatar',
		        method: 'POST',
		        data: {
					data:{
						userId:this.uid
					},
					msgType:'getUserAvatar'
		        },
		        header: {
					'Content-Type': 'application/json',
					'token':this.token,
					'uid':this.uid
		        },
		        success: (res) => {
					console.log(res);
					if(res.data.code==1){
						const userAvatar=res.data.data.imgType+'base64,'+res.data.data.userAvatar;
						uni.setStorageSync("userAvatar"+this.uid,userAvatar);
					}
		        },
		        fail: (err) => {
					console.error('请求失败:', err);
		        }
		});
	},
	
	getOtherUserData(){
		uni.request({
		 	url:this.baseUrl+'/getOtherUserData',
		 	method:'POST',
		 	data:{
		 		data:{
		 			userId:this.uid
		 		},
		 		msgType:'getOtherUserData'
		 	},
		 	header: {
		 		'Content-Type': 'application/json',// 如果需要以JSON格式发送数据
				'token':this.token,
				'uid':this.uid
		 	},
		 	success: (res) => {
				uni.setStorageSync('sex',res.data.data.sex);
				// 假设 res 是从某个 API 请求中获取的响应
				//console.log(res);
				
				// 打印要更新的计数值
				//console.log(res.data.data.followingCount); // 0
				//console.log(res.data.data.followersCount); // 0
				//console.log(res.data.data.visitCount);     // 0
				//console.log(res.data.data.ranking);        // 17
				
				// 要更新的 id 和新值的映射
				const updates = {
				    2: res.data.data.followingCount,
				    3: res.data.data.followersCount,
				    4: res.data.data.visitCount,
				    5: res.data.data.ranking
				};
				
				// 打印 accountDataList 以检查结构
				//console.log(this.accountDataList);
				
				// 更新值
				this.accountDataList.forEach(item => {
				    // 修改条件，以允许 0 作为有效值
				    if (updates[item.id] !== undefined) {
				        const newValue = updates[item.id]; // 获取新值
				        const formattedValue = this.formatNumber(newValue); // 格式化新值
				        //console.log(`Updating id ${item.id} from ${item.value} to ${formattedValue}`);
				        item.value = formattedValue; // 更新为格式化后的值
				    } else {
				        //console.log(`No update for id ${item.id}`);
				    }
				});
				
				// 输出更新后的数组
				//console.log(this.accountDataList);

			},
			fail: (err) => {
				console.log(err);
			},
		})
	},
    clickLogin() {
		uni.navigateTo({
			url: '/pages/login/login',
		}).catch(err => {
			console.error("Navigation error:", err);
		});
    },
    clickFunction(id) {
		if(this.uid==''||this.token==''){
			if(id!=0&&id!=1){
				uni.navigateTo({
					url: '/pages/login/login',
				});
				return;
			}
		}
      console.log("点击了功能，ID:", id);
	  /* 根据id做跳转 0扫码 1设置 10头像点击 其它的看list*/
	  switch(id){
		  case 0:
		  break;
		  case 1:
		  uni.navigateTo({
		  	url:'/pages/setting/setting'
		  }).catch(err=>{
		  	console.error("Navigation error:", err);
		  });
		  break;
		  case 2:
		  uni.navigateTo({
		  	url:'/pages/myFollow/myFollow'
		  }).catch(err=>{
		  	console.error("Navigation error:", err);
		  });
		  break;
		  case 6:
		  uni.navigateTo({
		  	url:'/pages/browseHistory/browseHistory'
		  }).catch(err=>{
		  	console.error("Navigation error:", err);
		  });
		  break;
		  case 7:
		  uni.navigateTo({
		  	url:'/pages/favorites-xhd/favorites-xhd'
		  }).catch(err=>{
		  	console.error("Navigation error:", err);
		  });
		  break;
		  case 8:
		  uni.navigateTo({
		  	url:"/pages/contentManage/contentManage"
		  })
		  break;
		  case 10:
		  this.gotoPersonalInformation();
		  break;
		  default:
		  break
	  }
    },
	gotoPersonalInformation(){
		if(this.uid!=''&&this.token!=''&&this.username!=''){
			uni.navigateTo({
		    url: "/pages/personalInformation/personalInformation?uid=" + this.uid+"&unAllowChat=false&username="+this.username
			});
		}
		
	},
	formatNumber(num) {
	    if (num >= 100000000) { // 大于等于1亿
	        return (num / 100000000).toFixed(1) + '亿'; // 转换为亿
	    } else if (num >= 10000) { // 大于等于1万
	        return (num / 10000).toFixed(1) + 'w'; // 转换为万
	    }
	    return num.toString(); // 小于1万的数字直接返回
	},
	
  },
  mounted() {
	  if(this.uid!=''&&this.token!=''){
		this.getUserAvatar();
	  }
  },
  onShow() {
  	this.initPage();
  }
};
</script>

<style lang="scss">
/* 保持原样 */
.whole {
  padding-top: var(--status-bar-height);
  height: 100vh;
  background-color: #F7F7F7;
	.myTabBar {
		width: 100%;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
		z-index: 1000;
	}
  
}



.avatarShowView {
  margin-top: 10rpx;
  margin-left: 30rpx;
  margin-bottom: 30rpx;
  margin-right: 30rpx;
  display: flex;
  align-items: center;
  height: 150rpx;
}

.topShowView {
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
}

.topImage {
  margin: 40rpx 30rpx 15rpx;
  width: 60rpx;
  height: 60rpx;
}

.loginText {
  font-size: 40rpx; /* 字体大小 */
  flex-grow: 1; /* 允许元素在 flex 容器中增长 */
  margin-left: 80rpx; /* 左边距 */
  text-align: left; /* 文本左对齐 */
  white-space: nowrap; /* 不换行 */
}

.usernameText{
	font-size: 50rpx; /* 字体大小 */
	flex-grow: 1; /* 允许元素在 flex 容器中增长 */
	margin-left: 50rpx; /* 左边距 */
	text-align: left; /* 文本左对齐 */
	
	white-space: nowrap; /* 不换行 */
	overflow: hidden; /* 隐藏超出部分 */
	text-overflow: ellipsis; /* 超出部分用省略号表示 */
}


.accountDataList-container {
  margin: 20rpx;
}

.functionList-container {
  margin: 20rpx;
  margin-top: 50rpx;
  padding: 20rpx; /* 内边距 */
  background-color: #fff; /* 背景颜色 */
  border-radius: 10rpx; /* 圆角 */
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.list-item {
  padding: 10rpx;
}

.values-row {
  display: flex;
  justify-content: space-between; /* 使内容两端对齐 */
}

/* 新增整体样式 */
.value-label {
  display: flex;
  flex-direction: column; /* 使 value 在上，label 在下 */
  align-items: center; /* 居中对齐 */
  flex: 1; /* 使每个 value-label 平分空间 */
  position: relative; /* 为伪元素提供定位 */
}

.value {
  font-weight: bold; /* 加粗 */
  text-align: center; /* 居中显示 */
}

.valueimg{
	width: 50rpx;
	height: 50rpx;
	margin-bottom: 20rpx;
	margin-top: 20rpx;
	padding: 10rpx;
	
}

.label {
	font-size: 25rpx;
  color: #666; /* 可以根据需要调整颜色 */
  text-align: center; /* 居中显示 */
}

/* 添加分割线样式 */
.value-label:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 1rpx; /* 分割线宽度 */
  height: 60%; /* 分割线高度 */
  background-color: #e2e2e2; /* 分割线颜色 */
  transform: translateY(-50%); /* 垂直居中 */
}
</style>
